import React from 'react';
import './style/';
import {Button,Icon,message,Alert,Carousel,Modal} from 'antd'
import {toJS} from 'mobx';
import {WeaTools, WeaDialog, WeaLocaleProvider,WeaNewScroll} from "ecCom";
import Setting from "../newEmployee/setting";
import Add from "./add";
import Slider from 'react-slick'
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
const getLabel = WeaLocaleProvider.getLabel;
class NewEmployee extends React.Component {

    state = {
        settingVisiable:false,
        addVisiable:false,
        setId: -1,
        data:{
            emps:[],
            showNumber:3,
            speed:2000
        }
    }

    setStateData = (data)=>{
        this.setState(data)
    }

    load = (id)=>{
        const data = this.state.data
        WeaTools.callApi('/api/portal/newEmployee/saveOrGetEmployeeById', 'POST', {"json":JSON.stringify({id:id,showNumber:data.showNumber,speed:data.speed})}).then((result) => {
            if (result.status == true) {
                if(result.data != null){
                    this.setState({data:result.data})
                }
            }
        });
    }

    componentWillMount(){
        const id = this.props.id;
        this.load(id)

    }

    componentDidUpdate(){
        const id = this.props.id
        const height = this.refs["newEmployee"+id].offsetHeight
        $(".empItem"+id).height(height-50)
    }

    render (){
        const id = this.props.id
        const data = this.state.data
        let emps = data.emps.slice(0,data.showNumber)

        const settings = {
            dots: false,
            infinite: true,
            speed: 500,
            slidesToShow: 1,
            slidesToScroll: 1,
            accessibility:false,
            autoplaySpeed:data.speed,
            autoplay:true,
            pauseOnFocus:true,
            pauseOnDotsHover:true,
            pauseOnHover:true,
        }
        return (

            <div ref={"newEmployee"+id} style={{width:'100%',height:'100%',position:'relative'}}>
                <div style={{height:"50px",'line-height':"50px",'margin-left':"10px",overflow:'hidden','text-overflow':'ellipsis','white-space':'nowrap'}} >{data.title}</div>
                <Slider {...settings}>
                    {
                        emps.map((item,index)=>{
                            return (
                                <div class={"empItem"+id}  style={{width:'100%'}}>

                                    <div style={{width:"100px",height:"100%",float:'left','margin-left':'5px'}}>
                                        <img src={"/weaver/weaver.file.FileDownload?fileid=323"} style={{width:"100px",height:"100px"}}/>
                                        <div style={{width:'100%',height:"30px","text-align":'center','line-height':'30px'}}>{item.name}</div>
                                    </div>
                                    <pre  style={{'margin-left':"110px",height:'100%',overflow:'auto'}} >
                                        {item.employeeDesc}
                                    </pre>
                                </div>
                            )
                        })
                    }
                </Slider>
                <Setting state={this.state} setStateData={this.setStateData} ></Setting>
                <Add state={this.state}  setStateData={this.setStateData} ></Add>
                {
                    this.props.isSetting == true
                        ?(
                            <div className={"lr_settingButtons_"+this.props.id +" lr_settingButtons_class"} >
                                <span className="icon-coms-Flow-setting  lr_settingButtons_span_class"  onClick={() => {this.setState({settingVisiable:true}) }}></span>
                            </div>
                        ):""
                }
            </div>
        )
    }


}
export default NewEmployee;